<link rel="stylesheet" type="text/css" href="css/j-tablehtml.css">
<!--地区三级联动-->
<link rel="stylesheet" href="css/j-selcetd.css" />
<script src="view/Select/js/jquery.combo.select.js"></script>
<link rel="stylesheet" href="view/Select/css/combo.select.css" />

<!-- 日期控件样式 -->
<link rel="stylesheet" href="view/layDateTest/laydateRepair.css">
<div class="page-con table-con">
	<div class="j-tab-con" id="jtab">
		<ul class="aegion-ul">
			<li class="active">地区考核统计</li>
			<li>入网率统计</li>
			<li>上线率统计</li>
			<li>轨迹完整率统计</li>
			<li>报警平均处理率</li>
			<li>数据合格率统计</li>
		</ul>
	</div>
	<div class="j-search-con">
		<div class="border-j-top"></div>
		<div class="border-j-bottom"></div>
		<div class="search-div">
			<div class="j-search-row assess-row" style="margin-bottom:20px;">
				<div class="item rtable_input">
					<p>地区</p>
					<div class="box">
						<div class="qrm-pinming">
							<div class="qrm-input-border">
								<input readonly id="area" type="text" placeholder="请选择" class="qrm-input">
							</div>
							<div class="qrm-main" id="qrm-main"></div>
						</div>
					</div>
				</div>
				<!-- <div class="form-group">
					<label class="col-sm-4 control-label">信息资源格式</label>
					<div class="col-sm-8">
							<select class="form-control input-sm" name = 'resourceFormats'  required="true">
									<option id = '1' value="1" selected>结构化数据</option>
									<option id = '1' value="1" selected>结构化数据</option>
									<option id = '1' value="1" selected>结构化数据</option>
									<option id = '1' value="1" selected>结构化数据</option>
									<option id = '1' value="1" selected>结构化数据</option>
							</select>
					</div>
			</div> -->
				<div class="datepicker item ju-select time_select">
					<p class="choose-time">选择时间</p>
					<select id="selectedOption" class="demo-input dateSelector" name="degree" lay-filter="required" date-target="WORLD">
					</select>
					<div class="c-datepicker-date-editor c-datepicker-single-editor J-datepickerTime-single" style="border:1px solid #4E9CF4;border-radius: 6px;
					color: #fff;margin-right:30px;">
						<i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
						<input id="worldId" type="text" readonly class="c-datepicker-data-input demo-input dateTargetWORLD" placeholder="请选择"/>
						<input id="d121" style="display:none;" class="c-datepicker-data-input Wdate" type="text" placeholder="请选择" onfocus="WdatePicker({isShowWeek:true,onpicked:placeAssessment.week(),errDealMode:3,maxDate:'%y-%M-#(%d - 8)'})"/>
					</div>
				</div>
				<!-- <div class="item time_select">
					<p class="choose-time">选择时间</p>
					<select id="selectedOption" class="demo-input dateSelector" name="degree" lay-filter="required" date-target="WORLD">
						<option value="d">日</option>
						<option value="w">周</option>
						<option value="m" selected>月</option>
						<option value="s">季</option>
						<option value="y">年</option>
					</select>

					<div class="c-datepicker-date-editor c-datepicker-single-editor J-datepickerTime-single" style="border:1px solid #4E9CF4;border-radius: 6px;
					color: #fff;margin-right:30px;">
						<i class="c-datepicker-range__icon kxiconfont icon-clock"></i>
						<input id="worldId" type="text" readonly class="c-datepicker-data-input demo-input dateTargetWORLD" placeholder="请选择"/>
						<input id="d121" style="display:none;" class="c-datepicker-data-input Wdate" type="text" placeholder="请选择" onfocus="WdatePicker({isShowWeek:true,onpicked:placeAssessment.week(),errDealMode:3,maxDate:'%y-%M-#(%d - 8)'})"/>
					</div>
				</div> -->
				<button class="j-btn" style="margin-right:10px;" id="check">查询</button>
				<button class="j-btn j-btn1" style="margin-right:10px;" id="resetClick">重置</button>
			</div>
			<!--切换的table-->
			<div class="out-table" style="min-height: 100px;position: relative;">
				<div class="jid-loading" id="jid_loading"><div class="typing_loader"></div></div>
				<!--地区考核统计-->
				<div class="j-table">
					<div class="cnf_table">
						<table id="placeAssessmentResultTable"></table>
					</div>
				</div>
				<!--入网率统计-->
				<div class="j-table" style="display:none;">
					<div class="cnf_table">
						<table id="placeNetworkTableTop"></table>
						<table id="recordNetworkTable"></table>
					</div>
				</div>
				<!--上线率统计-->
				<div class="j-table" style="display:none;">
					<div class="cnf_table">
						<table id="resultOnlinTableTop"></table>
						<table id="recordOnlinTable"></table>
					</div>
				</div>

				<!--轨迹完整率统计-->
				<div class="j-table" style="display:none;">
					<div class="cnf_table">
						<table id="resultLineTableTop"></table>
						<table id="recordLineTable"></table>
					</div>
				</div>

				<!--报警平均处理率-->
				<div class="j-table" style="display:none;">
					<div class="cnf_table">
						<table id="resultWarnTableTop"></table>
						<table id="recordWarnTable"></table>
					</div>
				</div>

				<!--数据合格率统计-->
				<div class="j-table" style="display:none;">
					<div class="cnf_table">
						<table id="resultDataTableTop"></table>
						<table id="recordDataTable"></table>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="view/time/js/moment.min.js"></script>
<script type="text/javascript" src="view/jjstree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="view/jjstree/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="js/jrequest.js"></script>
<script type="text/javascript" src="js/assessment/regionalAssessment.js"></script>
<!-- <script>
	$("#selectedOption").change(function(){
		var index=$(this).find("option:selected").val();
		if(index=="w"){
			$("#d121").show();
			$("#worldId").hide();
		}else{
			$("#worldId").show();
			$("#d121").hide();
		}
	})
	lay('#version').html('-v' + laydate.v);
	$Date = laydate;
	initDateForm();

	/**
	 * 季度初始化
	 * @param ohd 季度input dom对象非jquery对象
	 * @param sgl 有值单个，无值默认范围
	 */
	function renderSeasonDate(ohd, sgl) {
		var ele = $(ohd);
		$Date.render({
			elem: ohd,
			type: 'month',
			format: 'yyyy年M季度',
			range: sgl ? null : '~',
			min: "1900-1-1",
			max: "2099-12-31",
			btns: ['clear', 'confirm'],
			ready: function(value, date, endDate) {
				var hd = $("#layui-laydate" + ele.attr("lay-key"));
				if(hd.length > 0) {
					hd.click(function() {
						ren($(this));
					});
				}
				ren(hd);
			},
			done: function(value, date, endDate) {
				console.log(value, date, "季度")
				if(!isNull(date) && date.month > 0 && date.month < 5) {
					ele.attr("startDate", date.year + "-" + date.month);
				} else {
					ele.attr("startDate", "");
				}
				if(!isNull(endDate) && endDate.month > 0 && endDate.month < 5) {
					ele.attr("endDate", endDate.year + "-" + endDate.month)
				} else {
					ele.attr("endDate", "");
				}
			}
		});
		var ren = function(thiz) {
			var mls = thiz.find(".laydate-month-list");
			mls.each(function(i, e) {
				$(this).find("li").each(function(inx, ele) {
					var cx = ele.innerHTML;
					if(inx < 4) {
						ele.innerHTML = cx.replace(/月/g, "季度");
					} else {
						ele.style.display = "none";
					}
				});
			});
		}
	}
	/**
	 * 初始化表单中年季月日范围选择
	 * 下拉框与日期框对应：
	 *  <select class="dateSelector" date-target="PI" ...
	 *  <input type="text" class="dateTargetPI" readonly ...
	 *  PI为自定义的对应关键字
	 *
	 * @param form 要渲染的form的jquery对象，当form为空默认值为全页面
	 * @param sgl 有值单个，无值默认范围
	 */
	function initDateForm(sgl, form) {
		if(isNull(form)) form = $(document.body);
		var ltm = function(tar, tars, tva) {
			console.log(tar, tars, tva, "ttttttttttttt")
			tars.each(function() {
				$(this).removeAttr("lay-key");
				this.outerHTML = this.outerHTML;
			});
			tars = form.find(".dateTarget" + tar);
			tars.each(function() {
				var ele = $(this);
				if("y" == tva) {
					$Date.render({
						elem: this,
						type: 'year',
						format: 'yyyy年',
						done: function(value, date) {
							console.log(value, date, "年")

						}
					});

				} else if("s" == tva) {
					renderSeasonDate(this, 1);
				} else if("m" == tva) {
					ele.attr("startDate", "");
					ele.attr("endDate", "");
					$Date.render({
						elem: this,
						type: 'month',
						format: 'yyyy年MM月',
						done: function(value, date) {
							console.log(value, date, "月")
						}
					});
				} else if("d" == tva) {
					ele.attr("startDate", "");
					ele.attr("endDate", "");
					$Date.render({
						elem: this,
						format: 'yyyy年MM月dd日',
						done: function(value, date) {
							console.log(value, date, "日")
						}
					});
				} else if('w' == tva) {

				}
			});
		}
		var sels = form.find(".dateSelector");
		sels.each(function(i, e) {
			var ths = this;
			var thiz = $(e);
			var tar = thiz.attr("date-target");
			thiz.next().find("dd").click(function() {
				var tva = thiz.val();
				var tars = form.find(".dateTarget" + tar);
				ltm(tar, tars, tva);
			});
			thiz.change(function() {
				var tva = $(this).val();
				var tars = form.find(".dateTarget" + tar);
				ltm(tar, tars, tva);
			});
			var tars = form.find(".dateTarget" + tar);
			ltm(tar, tars, thiz.val());
		});
	}

	function isNull(s) {
		if(s == null || typeof(s) == "undefined" || s == "") return true;
		return false;
	}

	function getDateText() {
		var ele = $("#worldId");
		console.log(ele.val());
		console.log(ele.attr("startDate") + "," + ele.attr("endDate"));
	}
	/**
	 * WDatepicker插件
	 * */
	function createWdatePicker() {
		var type = $("#selType").val();
		WdatePicker({
			readOnly: true,
			dateFmt: 'yyyy - MM - dd',
			onpicked: pickTime,
			isShowWeek: true,
			maxDate: ' % y - % M - % d'
		});
	}
	/**
	 控件时间选中后，onpicked 事件对应的方法
	 根据不同的选择类型：日周月季年，计算最终选中的时间段
	 */
	function pickTime() {

		//			var type = $("#selType").combobox("getValue");
		var type = $("#selType").val();
		console.log(type, "日期")

		if(type == 1) { //按日
			//获取控件选择的时间，格式是根据设置的dateFmt : 'yyyy-MM-dd'
			var datetime = $dp.cal.getDateStr();
			$("#showstarttime").val(datetime + " 00:00:00");
			$("#showendtime").val(datetime + " 23:59:59");
		} else if(type == 2) { //按周

			var datetime = $dp.cal.getDateStr();

			console.log(datetime,"ddddddddd")
			//获取星期几，控件提供的方法
			var dstart = -$dp.cal.getP('w', 'w');
			var dend = dstart + 6;
			//计算一周的开始日期和结束日期，这个方法文档说返回的是字符串，但是实际中返回的是控件定义的时间对象，所以后面得自己转换成字符串
			var datestart = $dp.$DV(datetime, {
				d: dstart
			});
			var dateend = $dp.$DV(datetime, {
				d: dend
			});

			$("#showstarttime").val(dateToString(datestart) + " 00:00:00");
			$("#showendtime").val(dateToString(dateend) + " 23:59:59");
		} else if(type == 3) { //按月
			var y = $dp.cal.getP('y', 'yyyy');
			var M = $dp.cal.getP('M', 'M');

			var d = new Date(y, M, 0);

			var datestart = {};
			datestart.y = y;
			datestart.M = M;
			datestart.d = 1;
			var dateend = {};
			dateend.y = y;
			dateend.M = M;
			//获取月的最后一天
			dateend.d = d.getDate();

			$("#showstarttime").val(dateToString(datestart) + " 00:00:00");
			$("#showendtime").val(dateToString(dateend) + " 23:59:59");

		} else if(type == 4) { //按季
			var y = $dp.cal.getP('y', 'yyyy');
			var M = $dp.cal.getP('M', 'M');

			//计算季度的开始月份和结束月份
			var startM = parseInt((M - 1) / 3) * 3 + 1;
			var endM = startM + 2;

			var d = new Date(y, endM, 0);

			var datestart = {};
			datestart.y = y;
			datestart.M = startM;
			datestart.d = 1;
			var dateend = {};
			dateend.y = y;
			dateend.M = endM;
			//获取最后一个月的最后一天
			dateend.d = d.getDate();

			$("#showstarttime").val(dateToString(datestart) + " 00:00:00");
			$("#showendtime").val(dateToString(dateend) + " 23:59:59");

		} else if(type == 5) { //按年

			var y = $dp.cal.getP('y', 'yyyy');
			//这里可以直接字符串拼凑写死，但是为了格式统一，还是创建对象在转化吧
			var datestart = {};
			datestart.y = y;
			datestart.M = 1;
			datestart.d = 1;
			var dateend = {};
			dateend.y = y;
			dateend.M = 12;
			dateend.d = 31;

			$("#showstarttime").val(dateToString(datestart) + " 00:00:00");
			$("#showendtime").val(dateToString(dateend) + " 23:59:59");
		}

	};
	/**
	 控件返回的时间对象转换成字符串输出
	 控件的时间对象有y,M,d,H,m,s属性，分别返回年，月，日，时，分，秒
	 */
	function dateToString(date) {

		var strdate = "";
		strdate = strdate + date.y + "-";
		var M = date.M >= 10 ? date.M : ("0" + date.M);
		strdate = strdate + M;
		var d = date.d >= 10 ? date.d : ("0" + date.d);
		strdate = strdate + "-" + d;
		return strdate;
	};

	function funccc() {

		console.log($dp.$('d121').value,"vvvvvvvvv");
		$dp.$('d121').value = $dp.cal.getP('y') + "年" + $dp.cal.getP('W', 'WW') + "周";
		console.log($dp.$('d121').value,"aaaaaaaaaaaa")
	}
</script> -->
